<template>
  <div class="user-navigation">
    <el-menu
      :default-active="$store.state.userActiveIndex"
      :active-text-color="'#67C23A'"
      class="user-menu"
      @select="handleMenuSelect">
      
      <!-- 我的信息 -->
      <el-submenu index="1" class="menu-section">
        <template slot="title">
          <i class="el-icon-user-solid menu-icon"></i>
          <span class="menu-title">我的信息</span>
        </template>
        <el-menu-item index="1-1" @click="navigateTo('/home/user/userinfo')">
          <i class="el-icon-info menu-item-icon"></i>
          <span>基本信息</span>
        </el-menu-item>
        <el-menu-item 
          index="1-4" 
          v-if="$store.getters.isExpert"
          @click="navigateTo('/home/user/expertInfo')">
          <i class="el-icon-info menu-item-icon"></i>
          <span>专家信息</span>
        </el-menu-item>
        <el-menu-item 
          index="1-2" 
          v-if="!$store.getters.isExpert && !$store.getters.isAdmin"
          @click="navigateTo('/home/user/useraddress')">
          <i class="el-icon-s-home menu-item-icon"></i>
          <span>收货地址</span>
        </el-menu-item>
        <el-menu-item index="1-3" @click="navigateTo('/home/user/userpassword')">
          <i class="el-icon-s-tools menu-item-icon"></i>
          <span>修改密码</span>
        </el-menu-item>
      </el-submenu>

      <!-- 我的发布 -->
      <el-submenu 
        index="2" 
        class="menu-section"
        v-if="!$store.getters.isExpert && !$store.getters.isAdmin">
        <template slot="title">
          <i class="el-icon-s-claim menu-icon"></i>
          <span class="menu-title">我的发布</span>
        </template>
        <el-menu-item index="2-1" @click="navigateTo('/home/user/publishedgoods')">
          <i class="el-icon-s-shop menu-item-icon"></i>
          <span>我的商品</span>
        </el-menu-item>
        <el-menu-item index="2-2" @click="navigateTo('/home/user/publishedneeds')">
          <i class="el-icon-s-comment menu-item-icon"></i>
          <span>我的需求</span>
        </el-menu-item>
      </el-submenu>

      <!-- 专家管理 -->
      <el-submenu 
        index="4" 
        class="menu-section"
        v-if="!$store.getters.isAdmin">
        <template slot="title">
          <i class="el-icon-s-order menu-icon"></i>
          <span class="menu-title">专家管理</span>
        </template>
        <el-menu-item index="4-1" @click="navigateTo('/home/user/expertQuestion')">
          <i class="el-icon-question menu-item-icon"></i>
          <span>我的问答</span>
        </el-menu-item>
        <el-menu-item index="4-2" @click="navigateTo('/home/user/expertAppoint')">
          <i class="el-icon-alarm-clock menu-item-icon"></i>
          <span>我的预约</span>
        </el-menu-item>
        <el-menu-item 
          index="4-3" 
          v-if="$store.getters.isExpert"
          @click="navigateTo('/home/user/publishedknowledges')">
          <i class="el-icon-reading menu-item-icon"></i>
          <span>我的知识</span>
        </el-menu-item>
      </el-submenu>

      <!-- 我的订单 -->
      <el-submenu 
        index="3" 
        class="menu-section"
        v-if="!$store.getters.isExpert && !$store.getters.isAdmin">
        <template slot="title">
          <i class="el-icon-s-order menu-icon"></i>
          <span class="menu-title">我的订单</span>
        </template>
        <el-menu-item index="3-1" @click="navigateTo('/home/user/userbuy')">
          <i class="el-icon-s-goods menu-item-icon"></i>
          <span>我买的</span>
        </el-menu-item>
        <el-menu-item index="3-2" @click="navigateTo('/home/user/usersell')">
          <i class="el-icon-goods menu-item-icon"></i>
          <span>我卖的</span>
        </el-menu-item>
      </el-submenu>

      <!-- 我的融资 -->
      <el-menu-item 
        index="3" 
        class="menu-section"
        v-if="!$store.getters.isExpert && !$store.getters.isAdmin"
        @click="navigateTo('/home/user/userfinance')">
        <i class="el-icon-postcard menu-icon"></i>
        <span class="menu-title">我的融资</span>
      </el-menu-item>

      <!-- 用户管理 -->
      <el-menu-item 
        index="5" 
        class="menu-section"
        v-if="$store.getters.isAdmin"
        @click="navigateTo('/home/usermanage')">
        <i class="el-icon-s-check menu-icon"></i>
        <span class="menu-title">用户管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleMenuSelect(index) {
      this.$store.commit("updateUserActiveIndex", index);
    },
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path).catch(err => err);
      }
    }
  },
  created() {
    this.$store.commit("updateUserActiveIndex", "1-1");
  }
};
</script>

<style lang="less" scoped>
.user-navigation {
  width: 220px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  
  .user-menu {
    border-right: none;
    
    .menu-section {
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
    }
    
    .menu-icon {
      color: #67C23A;
      font-size: 18px;
      margin-right: 10px;
    }
    
    .menu-title {
      font-size: 15px;
      font-weight: 500;
    }
    
    .menu-item-icon {
      margin-right: 8px;
      color: #909399;
    }
    
    /deep/ .el-menu-item {
      height: 48px;
      line-height: 48px;
      font-size: 14px;
      
      &:hover {
        background-color: #f0f9eb;
      }
      
      &.is-active {
        background-color: #f0f9eb;
        color: #67C23A;
        
        .menu-item-icon {
          color: #67C23A;
        }
      }
    }
    
    /deep/ .el-submenu__title {
      height: 50px;
      line-height: 50px;
      
      &:hover {
        background-color: #f0f9eb;
      }
    }
  }
}
</style>